```svelte
<script lang="ts">
  import * as fileUpload from "@zag-js/file-upload"
  import { normalizeProps, useMachine } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(fileUpload.machine, ({ id }))
  const api = $derived(fileUpload.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <div {...api.getDropzoneProps()}>
    <input {...api.getHiddenInputProps()} />
    <span>Drag your file(s) here</span>
  </div>

  <button {...api.getTriggerProps()}>Choose file(s)</button>

  <ul {...api.getItemGroupProps()}>
    {#each api.acceptedFiles as file}
      <li {...api.getItemProps({ file })}>
        <div {...api.getItemNameProps({ file })}>{file.name}</div>
        <button {...api.getItemDeleteTriggerProps({ file })}>Delete</button>
      </li>
    {/each}
  </ul>
</div>
```
